import React, { Component } from "react";
import "./index.scss";

export default class Header extends Component {
	state = {
		title: "React 学习项目",
	};

	onSearch(e) {
		const { value } = e.target;
		if (value !== "") {
			if (e.keyCode === 13) {
				alert("查询 " + value);
			}
		}

	}
	render() {
		const { title } = this.state;
		return (
			<div className="header">
				<div className="title">
					<a href="/">{title}</a>
				</div>
				<div className="search">
					<input onKeyUp={this.onSearch.bind(this)} />
				</div>
				<div className="menu-group">
					<div className="menu">
						<a href="/">首页</a>
					</div>
					<div className="menu">
						<a href="/">文章</a>
					</div>
					<div className="menu">
						<a href="/">推荐</a>
					</div>
				</div>
			</div>
		);
	}
}
